<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TinyMCE</title>
</head>

<body>
    <h1>TinyMCE Quick Start Guide</h1>
    <!-- <textarea id="mytextarea">Hello, World!</textarea> -->

    <div id="TinyMCE"></div>
    <!-- 
        自定义皮肤
        http://skin.tiny.cloud/t5/
    -->

    <!-- <link rel="stylesheet" href="write.css"> -->
    <script src="./tinymce/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
        const plugins = ['wordcount', 'visualchars', 'visualblocks', /* 'toc', */ 'textpattern', /* 'template', */ 'tabfocus', /* 'spellchecker', */ /* 'searchreplace', *//*  'save', */ 'quickbars', /* 'print',  */'preview', /* 'paste',  *//* 'pagebreak', */ /* 'noneditable', */
        /* 'nonbreaking', */ /* 'media',  */'insertdatetime', 'importcss', /* 'imagetools', */ 'image', 'hr', 'help', 'fullscreen', /* 'fullpage',  */'directionality', /* 'codesample', */ 'code', 'charmap', 'link', /* 'table', */ 'lists', 'advlist',
            /*  'anchor', */ /* 'autolink', */ 'autoresize'/* , 'autosave' , */, 'paste'].join(' ')

        const toolbar = ['formats', 'undo', 'redo', /* 'paste',  *//* 'print', */ 'fontsizeselect', 'fontselect', /*  'template',  *//* 'fullpage|wordcount', */ 'ltr', 'rtl', 'visualchars', 'visualblocks', /*  'toc', */ 'spellchecker', /*  'searchreplace|save', */
            'pagebreak', /* 'nonbreaking|media', */ 'image|outdent', 'indent', 'aligncenter', 'alignleft', 'alignright', 'alignjustify', 'lineheight', '', 'underline', 'quicklink', 'h2', 'h3', 'blockquote', 'numlist',
            'bullist', /* 'table', */ 'removeformat', 'forecolor', 'backcolor', 'bold', 'italic', '', 'strikethrough', 'hr', 'charmap', 'link', 'insertdatetime|subscript', 'superscript', 'cut', /* 'codesample',  */'code', '|anchor',
            'preview', 'fullscreen|help'].join(' ')
        tinymce.init({
            selector: '#TinyMCE',
            language_url: './tinymce/langs/zh_CN.js', // 中文语言包路径
            language: 'zh_CN',
            skin: "CUSTOM",
            content_css: "CUSTOM",
            menubar: false, // 隐藏菜单栏
            autoresize_bottom_margin: 50,
            // max_height: 500,
            // min_height: props.height,
            // height: props.height,
            toolbar_mode: 'none',
            plugins: plugins,
            // toolbar: toolbar,

            // plugins: [
            //     "a11ychecker advcode casechange formatpainter",
            //     "linkchecker autolink lists checklist",
            //     "media mediaembed pageembed permanentpen",
            //     "powerpaste table advtable tinymcespellchecker"
            // ],
            toolbar: "formatselect | fontselect | bold italic strikethrough forecolor backcolor formatpainter | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | link insertfile b2imagelibrary | removeformat | code | addcomment | checklist | casechange",
            // toolbar: "formatselect | fontselect | bold italic strikethrough forecolor backcolor formatpainter | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | link insertfile image | removeformat | code | addcomment | checklist | casechange",

            content_style: 'p {margin: 5px 0; font-size: 14px}',
            fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
            font_formats:
                '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
            branding: false,
            elementpath: false,
            contextmenu: false,
            resize: false, // 禁止改变大小
            statusbar: false, // 隐藏底部状态栏
            placeholder: '请输入内容！',
            quickbars_insert_toolbar: '',

            // 粘贴时，清除样式
            paste_auto_cleanup_on_paste: true,
            paste_remove_styles: true,
            paste_remove_styles_if_webkit: true,
            paste_strip_class_attributes: true,
            // paste_as_text: true,

            setup: (editor) => {
                //重写标题按钮
                // editor.ui.registry.addToggleButton('heading', {
                //     icon: 'heading',
                //     tooltip: 'Title',
                //     onAction: function (_) {
                //         editor.execCommand('mceToggleFormat', false, 'h2');
                //     },
                //     onSetup: function (api) {
                //         editor.formatter.formatChanged('h2', function (state) {
                //             api.setActive(state);
                //         });
                //     }
                // });

                // editor.ui.registry.addMenuButton('insertShotCode', {
                //     text: 'insert shot code',
                //     tooltip: 'insert shot code Text',
                //     fetch: (callback) => {
                //         var items = [
                //             {
                //                 type: 'menuitem',
                //                 text: 'insert hidden content',
                //                 onAction: function () {
                //                     editor.insertContent('<p>[content_hide]</p><p>' + b2_global.js_text.global.editor_hidden_content + '</p><p>[/content_hide]</p>');
                //                 }
                //             },
                //             {
                //                 type: 'menuitem',
                //                 text: 'Insert Post',
                //                 onAction: () => {
                //                     this.showPostBox = true
                //                 }
                //             },
                //             {
                //                 type: 'menuitem',
                //                 text: 'Insert File',
                //                 onAction: () => {
                //                     this.showFileBox = true
                //                 }
                //             },
                //         ];
                //         callback(items);
                //     }
                // });

                //图片按钮
                // editor.ui.registry.addButton('image-lib', '<svg class="Zi Zi--InsertImage" width="24" height="24"><path d="M21 17.4c0 .9-.9 1.6-2 1.6H5c-1.1 0-2-.7-2-1.6V6.6C3 5.7 3.9 5 5 5h14c1.1 0 2 .7 2 1.6v10.8zm-9.4-3.9a.5.5 0 01-.9 0l-1.3-2a.5.5 0 00-.8 0l-2.2 3.8a.5.5 0 00.5.7h10.3a.5.5 0 00.4-.7l-3-5.5a.5.5 0 00-.9 0l-2.1 3.7z" fill-rule="evenodd"/></svg>');
                editor.ui.registry.addButton('b2imagelibrary', {
                    tooltip: "Insert image",
                    // icon: 'b2-image-library',
                    text: '<svg class="Zi Zi--InsertImage" width="24" height="24"><path d="M21 17.4c0 .9-.9 1.6-2 1.6H5c-1.1 0-2-.7-2-1.6V6.6C3 5.7 3.9 5 5 5h14c1.1 0 2 .7 2 1.6v10.8zm-9.4-3.9a.5.5 0 01-.9 0l-1.3-2a.5.5 0 00-.8 0l-2.2 3.8a.5.5 0 00.5.7h10.3a.5.5 0 00.4-.7l-3-5.5a.5.5 0 00-.9 0l-2.1 3.7z" fill-rule="evenodd"/></svg>',
                    onAction: () => {
                        alert(1)

                        tinymce.activeEditor.insertContent(
                            '<img data-v-c647d006="" data-v-35730ce1="" src="https://oss.petslib.cn/prod/news/files/20230922/3b8005c9d9819e430adf261ef1d2f7aa.jpg?x-oss-process=image/auto-orient,1/quality,q_90/watermark,image_cHJvZC9zdGF0aWMvaW1hZ2VzL3dhdGVybWFyay93YXRlcm1hcmtfbG9nby5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8yMA,g_south,t_45,x_10,y_10" alt="Blue Buffalo报道一季度宠物湿粮销售量下降">'
                        );
                    }
                });

                //视频按钮按钮
                // editor.ui.registry.addIcon('b2-video', '<svg class="Zi Zi--InsertVideo" width="24" height="24"><path d="M10.5 15c-.4.3-.8 0-.8-.5v-5c0-.6.4-.8.8-.5l4.3 2.5c.5.3.5.7 0 1L10.5 15zM5 5S3 5 3 7v10s0 2 2 2h14c2 0 2-2 2-2V7c0-2-2-2-2-2H5z" fill-rule="evenodd"/></svg>');
                // editor.ui.registry.addButton('b2video', {
                //     tooltip: "Insert video",
                //     icon: 'b2-video',
                //     onAction: this.showVideoBoxAc
                // });

            },
            // 图片上传
            images_upload_handler(blobInfo, success) {
                // const file = {
                //     name: blobInfo.filename(),
                //     raw: blobInfo.blob()
                // }
                // fileUpload(
                //     file,
                //     {
                //         folder: props.folder,
                //         bucket: props.bucket
                //     }
                // ).then(({ url }) => {
                //     // success('https://lupic.cdn.bcebos.com/20210629/26719484_14.jpg');
                //     if (props.watermark) {
                //         success(url + '?x-oss-process=' + props.watermark)
                //     } else {
                //         success(url)
                //     }
                // }).catch(() => {
                //     success(this.result)
                // })
            }
        });
    </script>
</body>

</html>